如何使用 SCSS 讓我們更輕鬆的工作

2023 iThome 鐵人賽

DAY 11

Modern Web

給前端新手的圖文故事系列第 11 篇

15th鐵人賽

iffyart

團隊狗狗與睡袋的產地

2023-09-26 16:25:16

182 瀏覽

分享至

其實在概念上，scss 主要的任務就是在幫我們做 css 的管理與維護，並且使用迴圈封裝與一些判斷式，來為我們完成一些平常需要重複處理的部分。

使用 scss 來處理 RWD 的程式

在撰寫 scss 等語法的時候，我們可以去程式重複撰寫的部分下手，如 RWD 程式的處理，在 css 中需要重複撰寫 @media 的判斷，而再 scss 中，我們可以將這個項目包覆起來，並且作為一個 mixin 使用。

我們會使用 @content 的方式，將這個 mixin 在調度時，可以使用 {} 將內容傳入進去，已達到可以重複使用 @media 的效果。

另外我們可以將裝置的尺寸抽成變數，這樣可以在我們後期確認到大眾裝置尺寸有異動時，更方便且快速的修改 RWD 的偵測尺寸。

mixin 定義檔案

// RWD size
$XL-media: 1760px;
$L-media: 1240px;
$M-media: 920px;
$S-media: 556px;

// 1760px> Display
@mixin XLpc-width() {
  @media all and (min-width: $XL-media) {
    @content;
  }
}

// 1760px~1240px Display
@mixin Lpc-width() {
  @media all and (max-width: $XL-media) and (min-width: $L-media) {
    @content;
  }
}

// 1240px~920px Display */
@mixin pc-width() {
  @media all and (max-width: $L-media) and (min-width: $M-media) {
    @content;
  }
}

// 920px~556px Display
@mixin pad-width() {
  @media all and (max-width: $M-media) and (min-width: $S-media) {
    @content;
  }
}

// 920px~0 Display
@mixin pad-under-width() {
  @media all and (max-width: $M-media) {
    @content;
  }
}

// 556px~0 Display
@mixin phone-width() {
  @media all and (max-width: $S-media) {
    @content;
  }
}

在任何地方使用它

.block {
  width: 50%;
  
  @include phone-width() {
    width: 100%;
  }
}

編譯出來的結果

.block {
  width: 50%;
}

@media all and (max-width: $S-media) {
  .block {
    width: 100%;
  }
}

使用 scss 來處理重複性的內容

在設計 css 時，我們很常會撰寫一些重複性質的結構，已讓 UI 可以有更多的顯示方式，而這些重複性質的結構，在 scss 中其實都很適合直接用迴圈完成運作，像下面的範例，我們會希望使用 Grid 來處理 UI，並且有不同的格數可做選則

基礎 Grid 編寫

scss 迴圈撰寫

@for $number from 2 through 4 {
  .grid-#{$number} {
    display: grid;
    grid-template-columns: repeat(#{$number}, 1fr);
    grid-gap: 10px;
  }
}

scss 編譯結果

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

基礎 Grid 加入 RWD 與判斷式的方法

想當然而，我們在設計 Grid 時總不可能永遠在 UI 上顯示的是設定的格數，因為在手機版或平板端時，這往往會導致畫面跑版，因此在這裡我們可以使用上面 RWD 的 mixin 來協助處理，並且在加入一些額外的判斷條件

scss 迴圈撰寫

@for $number from 2 through 4 {
  .grid-#{$number} {
    display: grid;
    grid-template-columns: repeat(#{$number}, 1fr);
    grid-gap: 10px;

		// 這邊是設定在平板端有不同的 RWD 處理方式，判斷條件是格數大於 2
    @if $number>2 {
      @include pad-width() {
        grid-template-columns: repeat(2, 1fr);
      }
    } @else {
      @include pad-width() {
        grid-template-columns: repeat(1, 1fr);
      }
    }

    @include phone-width() {
      grid-template-columns: repeat(1, 1fr);
    }
  }
}

scss 編譯結果

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

@media all and (max-width: 920px) and (min-width: 556px) {
  .grid-2 {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media all and (max-width: 556px) {
  .grid-2 {
    grid-template-columns: repeat(1, 1fr);
  }
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

@media all and (max-width: 920px) and (min-width: 556px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media all and (max-width: 556px) {
  .grid-3 {
    grid-template-columns: repeat(1, 1fr);
  }
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

@media all and (max-width: 920px) and (min-width: 556px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media all and (max-width: 556px) {
  .grid-4 {
    grid-template-columns: repeat(1, 1fr);
  }
}

處理常見格線設置

我們之前有聊到格線的設置與概念，他的核心機制其實非常的單純，因此我們可以在這裡直接用一個迴圈來處理這個格線機制

scss 迴圈撰寫

$row-size_col-space: 10px;
$row-size_col-min: 240px;

.row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-right: -$row-size_col-space;
  margin-left: -$row-size_col-space;

  > * {
    box-sizing: border-box;
    padding: $row-size_col-space;
  }

  .col {
    flex: 1 $row-size_col-min;
  }

  @for $itemNumber from 1 through 12 {
    .col-#{$itemNumber} {
      flex: 0 0 auto;
      width: #{100% * ($itemNumber/12)};
    }
  }
}

scss 編譯結果

.row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px;
}
.row > * {
  box-sizing: border-box;
  padding: 10px;
}
.row .col {
  flex: 1 240px;
}
.row .col-1 {
  flex: 0 0 auto;
  width: 8.3333333333%;
}
.row .col-2 {
  flex: 0 0 auto;
  width: 16.6666666667%;
}
.row .col-3 {
  flex: 0 0 auto;
  width: 25%;
}
.row .col-4 {
  flex: 0 0 auto;
  width: 33.3333333333%;
}
.row .col-5 {
  flex: 0 0 auto;
  width: 41.6666666667%;
}
.row .col-6 {
  flex: 0 0 auto;
  width: 50%;
}
.row .col-7 {
  flex: 0 0 auto;
  width: 58.3333333333%;
}
.row .col-8 {
  flex: 0 0 auto;
  width: 66.6666666667%;
}
.row .col-9 {
  flex: 0 0 auto;
  width: 75%;
}
.row .col-10 {
  flex: 0 0 auto;
  width: 83.3333333333%;
}
.row .col-11 {
  flex: 0 0 auto;
  width: 91.6666666667%;
}
.row .col-12 {
  flex: 0 0 auto;
  width: 100%;
}

當然，我們一樣可以在這裡處理 RWD 的部分，但這裡要怎麼去進行細部規劃，就看每個人希望如何規劃專案了